Skip to main content

Text input

Text input allows people to enter any type of text unless otherwise restricted.

Examples

Default

Examples

Usage

Refer to the VA Design System for usage guidance

Content considerations

Accessibility considerations

Code usage

Link to Storybook coming soon

Text input with a label

NameTypeDefault ValueRequiredDescription
inputTypeVATextInputTypesYesType of the input. Will determine the keyboard used
valuestringNoInitial value of the input. If blank it will show the placeholder
labelKeystringNoi18n key for the label
onChange(val: string) => voidYesHandle the change in input value
maxLengthnumberNoMaximum length of the input
onEndEditing() => voidNoHandle input once the user is done typing
testIDstringNooptional testID for the overall component
inputRefRefObject<TextInput>Nooptional ref value
isRequiredFieldbooleanNooptional boolean that displays required text next to label if set to true
helperTextKeystringNooptional key for string to display underneath label
setError(error?: string) => voidNooptional callback to update the error message if there is an error
errorstringNoif this exists updates input styles to error state
isTextAreabooleanNooptional boolean that when true displays a text area rather than a single line text input
setInputCursorToBeginningbooleanNooptional boolean to set the cursor to the beginning of a string value